<!DOCTYPE html>
<html>
<head>
  <style>
    .tab-container {
      max-width: 600px;
      margin: 0 auto;
    }
    
    .tab-buttons {
      display: flex;
    }
    
    .tab-btn {
      padding: 10px 20px;
      background: #f1f1f1;
      border: none;
      cursor: pointer;
      flex: 1;
      transition: 0.3s;
    }
    
    .tab-btn:hover {
      background: #ddd;
    }
    
    .tab-btn.active {
      background: #2196F3;
      color: white;
    }
    
    .tab-content {
      display: none;
      padding: 20px;
      border: 1px solid #ddd;
      border-top: none;
      animation: fadeEffect 0.5s;
    }
    
    @keyframes fadeEffect {
      from {opacity: 0;}
      to {opacity: 1;}
    }
    
    .tab-content.active {
      display: block;
    }
  </style>
</head>
<body>
  <div class="tab-container">
    <div class="tab-buttons">
      <button class="tab-btn active" onclick="openTab(event, 'tab1')">选项卡1</button>
      <button class="tab-btn" onclick="openTab(event, 'tab2')">选项卡2</button>
      <button class="tab-btn" onclick="openTab(event, 'tab3')">选项卡3</button>
    </div>
    
    <div id="tab1" class="tab-content active"><img height="130" src="../image1.jpg" alt="">
      <h3>内容1</h3>
      <p>这是第一个选项卡的内容。</p>
    </div>
    
    <div id="tab2" class="tab-content"><img height="130" src="../image2.jpg" alt="">
      <h3>内容2</h3>
      <p>这是第二个选项卡的内容。</p>
    </div>
    
    <div id="tab3" class="tab-content"><img height="130" src="../image3.jpg" alt="">
      <h3>内容3</h3>
      <p>这是第三个选项卡的内容。</p>
    </div>
  </div>

  <script>
    function openTab(evt, tabId) {
      // 隐藏所有内容
      var tabContents = document.getElementsByClassName("tab-content");
      for (var i = 0; i < tabContents.length; i++) {
        tabContents[i].classList.remove("active");
      }
      
      // 移除所有按钮的active类
      var tabButtons = document.getElementsByClassName("tab-btn");
      for (var i = 0; i < tabButtons.length; i++) {
        tabButtons[i].classList.remove("active");
      }
      
      // 显示当前内容并激活按钮
      document.getElementById(tabId).classList.add("active");
      evt.currentTarget.classList.add("active");
    }
  </script>
</body>
</html>